<template>
	<el-dropdown trigger="click" @command="setAssemblySize">
		<i :class="'iconfont icon-contentright'" class="toolBar-icon"></i>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item
					v-for="item in assemblySizeList"
					:key="item.value"
					:command="item.value"
					:disabled="assemblySize === item.value"
				>
					{{ item.label }}
				</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useGlobalStore } from "@/stores/modules/global";
import type { GlobalState } from "@/stores/modules/global/typing";

const globalStore = useGlobalStore();
const assemblySize = computed(() => globalStore.assemblySize);

const assemblySizeList = [
	{ label: "默认", value: "default" },
	{ label: "大型", value: "large" },
	{ label: "小型", value: "small" }
];

const setAssemblySize = (item: GlobalState["assemblySize"]) => {
	if (assemblySize.value === item) return;
	globalStore.setGlobalState("assemblySize", item);
};
</script>
